<!-- 组装 -->
<template>
  <el-form
    :inline="true"
    :model="formInline"
    class="demo-form-inline"
    label-width="60px"
    size="large"
    @submit.prevent
  >
    <el-form-item label="站别">
      <el-select
        v-model="formInline.station"
        placeholder="请选择站别"
        clearable
        @change="changeStation"
      >
        <el-option
          v-for="item in stationList"
          :key="item.Value"
          :label="item.Label"
          :value="item.Value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="SN">
      <el-input
        class="my-sn"
        ref="snRef"
        v-model="formInline.sn"
        placeholder="请扫描或者输入SN"
        :suffix-icon="CircleCheck"
        @focus="focusSN"
        @keyup.enter.prevent="handleSN"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" plain @click="onReset">重&nbsp;&nbsp;置</el-button>
    </el-form-item>
    <br />
    <el-form-item label="物料">
      <el-input
        class="my-pn"
        ref="pnRef"
        v-model="formInline.compSN"
        placeholder="请扫描或者输入物料"
        style="width: 520px"
        @focus="focusPN"
        @keyup.enter.prevent="onSubmit"
      />
    </el-form-item>
    <el-form-item label="数量">
      <el-input v-model="formInline.qty" style="width: 80px" disabled />
    </el-form-item>
  </el-form>
  <div style="height: 550px">
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f5f7fa' }"
      stripe
      border
      size="large"
      style="width: 100%"
    >
      <el-table-column align="center" prop="seq" label="序号" />
      <el-table-column align="center" prop="compSN" label="物料SN" />
      <el-table-column align="center" fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="danger" size="large" @click="handleDel(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <Tips :tips="tips" />
</template>

<script lang="ts" setup>
import { useMessage } from '@/hooks/useMessage'
import { objectToQueryParams } from '@/utils/objectToQuery'
import { onMounted, reactive, ref } from 'vue'
import * as BasicApi from '@/api'
import { CircleCheck } from '@element-plus/icons-vue'
import Tips from '../common/tips/Index.vue'

//定义接收的props
const props = defineProps({
  // 定义一个对象类型的 prop
  data: {
    type: Object,
    default: () => ({ groupName: '', jobType: '' })
  }
})

const basicParams = reactive({
  groupName: props.data.groupName,
  jobType: props.data.jobType
})

const formInline = reactive({
  sn: '',
  station: '',
  compSN: '',
  qty: 0
})

const tips = reactive({
  code: 200,
  message: ''
})

const snRef = ref<HTMLInputElement | null>(null)
const focusSN = () => {
  snRef.value?.focus()
}
const selectAllSN = () => {
  snRef.value?.select()
}

const pnRef = ref<HTMLInputElement | null>(null)
const focusPN = () => {
  pnRef.value?.focus()
}
const selectAllPN = () => {
  pnRef.value?.select()
}

//将光标聚焦到SN
const changeStation = () => {
  formInline.sn = ''
  formInline.station && focusSN()
}

//刷入SN后调用接口 判断数量 > 0 光标聚焦到物料
const handleSN = async () => {
  const post = {
    ...basicParams,
    operType: 'SNCheck',
    station: formInline.station,
    sn: formInline.sn
  }
  const inputStr = objectToQueryParams(post)
  const res = (await BasicApi.Query({ inputStr })) as any
  tips.code = res.code
  tips.message = res.msg
  if (res.code !== 200) {
    message.error(res.msg)
    return
  }
  formInline.qty = res.rsCount
  if (formInline.qty > 0) {
    focusPN()
    return
  }
  //光标全选当前SN
  selectAllSN()
}

const list = ref<any[]>([])

const onSubmit = async () => {
  //首先判断当前物料是否在SN下
  const post = {
    ...basicParams,
    operType: 'CompCheck',
    station: formInline.station,
    sn: formInline.sn,
    compSN: formInline.compSN
  }
  const inputStr = objectToQueryParams(post)
  const res = (await BasicApi.Query({ inputStr })) as any
  tips.code = res.code
  tips.message = res.msg
  if (res.code !== 200) {
    message.error(res.msg)
    return
  }
  const snExists = list.value.some((item) => item.compSN === formInline.compSN)
  if (!snExists) {
    list.value.push({
      seq: list.value.length + 1,
      compSN: formInline.compSN
    })
    if (list.value.length === formInline.qty) {
      //调用提交接口 成功的话光标回到SN，清空列表
      const temp = {
        ...post,
        compSN: '',
        operType: 'Routing'
      }
      const jsonData = list.value.map((item) => {
        return {
          compSN: item.compSN
        }
      })
      const result = (await BasicApi.Query({
        inputStr: objectToQueryParams(temp),
        jsonData
      })) as any
      const { code, msg } = result
      tips.code = code
      tips.message = msg
      if (result.code !== 200) {
        message.error(result.msg)
        return
      }
      message.success(res.msg)
      onReset()
      return
    }
    //光标全选物料 继续刷
    selectAllPN()
    return
  }
  message.warning('重复录入物料')
}

const onReset = () => {
  formInline.sn = ''
  focusSN()
  formInline.compSN = ''
  formInline.qty = 0
  list.value = []
  tips.code = 200
  tips.message = ''
}

const message = useMessage()
const handleDel = async (index: number) => {
  // 删除的二次确认
  await message.delConfirm()
  list.value.splice(index, 1)
}

const stationList = ref<any[]>([])
const getStationList = async () => {
  const post = {
    ...basicParams,
    operType: 'GetValue',
    key: 'Station'
  }
  const inputStr = objectToQueryParams(post)
  const res = (await BasicApi.Query({ inputStr })) as any
  if (res.code !== 200) {
    message.error(res.msg)
    return
  }
  stationList.value = res.data.listInfo || []
}
onMounted(() => {
  getStationList()
})
</script>

<style scoped lang="less">
:deep(.el-form-item__label) {
  font-size: 16px;
}
.demo-form-inline .el-input {
  --el-input-width: 300px;
}

.demo-form-inline .el-select {
  width: 300px;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #fdf6ec;
}
:deep(.el-input.is-disabled .el-input__inner) {
  -webkit-text-fill-color: #e6a23c;
  font-weight: 600;
}
:deep(.el-input .el-input__inner) {
  font-size: 16px;
}
:deep(.my-pn .el-input__wrapper) {
  background: #eaf6fb;
}
:deep(.my-sn .el-input__wrapper) {
  background: #f0f9eb;
  border: 1px solid #67c23a;
  box-shadow: none;
}
:deep(.el-input .el-input__icon) {
  font-size: 18px;
  color: #67c23a;
}
:deep(.el-table__empty-block) {
  height: 500px !important;
}
</style>
